<template>
  <div>
    <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
      <!-- 首行 -->
      <tr class="title">
        <td width="50">
          <input
            type="checkbox"
            name=""
            class="choose_all"
            :checked="chooseAll"
            @change="isAllchecked"
          />
        </td>
        <td width="100" class="">
          <span style="margin-left: -10px">全选</span>
        </td>
        <td width="400">商品信息</td>
        <td width="150">单价（元）</td>
        <td width="150">数量</td>
        <td width="150">金额（元）</td>
        <td width="80">操作</td>
      </tr>

      <!-- 商品具体信息 -->
      <tr class="row" v-for="item in list" :key="item.id">
        <td>
          <input
            v-model="item.isSelected"
            type="checkbox"
            name=""
            class="choose"
          />
        </td>
        <td class="tal">
          <a href="#" class="pic"><img :src="item.img" alt="" /></a>
        </td>
        <td class="tal">
          <a href="#">{{ item.name }}</a>
        </td>
        <td>
          <del class="tdl">{{ item.oldPrice }}</del>
          <br />
          <b class="unit">{{ item.price }}</b>
        </td>
        <td>
          <div class="amount">
            <a href="#" class="Increase" @click="increaseCount(item.id)">+</a>
            <input
              type="text"
              value="item.count"
              class="unum"
              v-model="item.count"
            />
            <a href="#" class="Reduce" @click="reduceCount(item.id)">-</a>
          </div>
        </td>
        <td>
          <b class="u-price">{{ item.oldPrice * item.count }}</b>
        </td>
        <td>
          <a href="#" class="btn-del" @click="btnDelect(item.id)">删除</a>
        </td>
      </tr>
      <tr class="count">
        <td colspan="7">
          <div class="jiesuan clearfix">
            <div class="left fl">
              <p>
                <input
                  type="checkbox"
                  name=""
                  class="choose_all"
                  :checked="chooseAll"
                  @change="isAllchecked"
                />
                全选&nbsp;&nbsp;&nbsp;
                <a href="#" class="del_check" @click="delCheck">删除选中商品</a>
              </p>
            </div>
            <div class="right fr clearfix">
              <p>商品总计：￥{{ oldpriceTotal }}</p>
              <p>活动优惠：-￥{{ discount }}</p>
              <p>
                已选商品<span class="red t-number"> {{ totalCounts }} </span>件
                总价(不含运费、税费)：<span class="red t-price"
                  >￥{{ finaltotalPrice }}</span
                >
              </p>
              <!-- <div><a href="#" class="btn pay">结算</a></div> -->
              <a href="#" class="btn pay fr">结算</a>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TableList',
  props: {
    list: {
      type: Array,
      required: true,
    },
    chooseAll: {
      type: Boolean,
      required: true,
    },
  },
  components: {},
  data() {
    return {}
  },
  methods: {
    isAllchecked() {
      this.$emit('isAllchecked', !this.chooseAll)
    },
    btnDelect(id) {
      this.$emit('btnDelect', id)
    },
    delCheck() {
      this.$emit('delCheck')
    },
    increaseCount(id) {
      this.$emit('increaseCount', id)
    },
    reduceCount(id) {
      this.$emit('reduceCount', id)
    },
  },
  mounted() {},
  watch: {},
  computed: {
    totalCounts() {
      return this.list.reduce((prev, item) => {
        return prev + item.count
      }, 0)
    },
    oldpriceTotal() {
      return this.list.reduce((prev, item) => {
        return prev + item.oldPrice * item.count
      }, 0)
    },
    discount() {
      return this.list.reduce((prev, item) => {
        return prev + (item.oldPrice - item.price) * item.count
      }, 0)
    },
    finaltotalPrice() {
      return this.oldpriceTotal - this.discount
    },
  },
  filters: {},
}
</script>

<style scoped lang="less"></style>
